<template>
  <div>
    <el-row>
      <span style="color:grey">共{{ logicList.length }}条跳转逻辑</span>
    </el-row>
    <vxe-toolbar size="mini">
      <template #buttons>
        <vxe-button type="text" icon="vxe-icon--plus" status="success" @click="handleAdd">新增</vxe-button>
        <vxe-button type="text" icon="vxe-icon--close" status="danger" @click="handleDeleteRow">删除</vxe-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="xTable"
      :align="'left'"
      :data="logicList"
      :edit-config="{trigger: 'click', mode: 'cell'}"
      highlight-current-row
      highlight-hover-row
      border
      resizable
      show-overflow
      size="mini"
      @edit-actived="editActivedEvent"
    >
      <vxe-table-column field="remark1" title="说明" width="70" />
      <vxe-table-column field="sourceDetailId" title="源题" width="280" :edit-render="{name: '$select', options: toList, props: {clearable: true}, events: {change: sourceDetailIdChangeEvent}}" />
      <vxe-table-column field="remark2" title="说明" width="70" />
      <vxe-table-column field="itemIndexOrder" title="选项" width="150" :formatter="formatItemIndexOrderLabel" :edit-render="{name: '$select', options: itemList, props: {multiple: multiple}}" />
      <vxe-table-column field="visibleFlag" title="显示设置" :edit-render="{name: '$select', options: visibleList, props: {clearable: true}}" />
      <template #empty>
        <span style="color: red;">
          <img src="../../../../public/images/img1.gif">
          <p>暂无数据！</p>
        </span>
      </template>
    </vxe-table>
    <el-row style="height:32px">
      <el-row style="float:right;margin-top:4px;">
        <el-button size="mini" type="success" icon="el-icon-check" circle @click="handleSava" />
        <el-button size="mini" type="danger" icon="el-icon-close" circle @click="handleClose" />
      </el-row>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'QuestionLogic',
  props: {
    questionDetail: {
      type: Object,
      required: true,
      default: function() {
        return {}
      }
    },
    question: {
      type: Object,
      required: true,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      logicList: [],
      itemList: [],
      visibleList: [{
        value: '1',
        label: '显示'
      }, {
        value: '0',
        label: '不显示'
      }]
    }
  },
  computed: {
    toList() {
      const list = []
      this.question.questionDetailList.forEach(mm => {
        list.push({
          value: mm.detailId,
          label: `[${mm.indexOrder}]${mm.caption}`
        })
      })
      return list
    },
    multiple() {
      return this.questionDetail.question_type === 'multiple-choice'
    }
  },
  mounted: function() {
    this.questionDetail.questionDetailItemList.forEach(mm => {
      this.itemList.push({
        value: mm.indexOrder,
        label: mm.optionName
      })
    })
    // 克隆对象
    this.logicList = JSON.parse(JSON.stringify(this.questionDetail.questionLogicList))
  },
  methods: {
    // 显示
    formatItemIndexOrderLabel({ cellValue, row }) {
      const sourceDetailId = row.sourceDetailId
      const detail = this.question.questionDetailList.find(item => item.detailId === sourceDetailId)
      if (detail) {
        const detailItem = detail.questionDetailItemList.find(item => item.indexOrder === row.itemIndexOrder)
        if (detailItem) {
          return detailItem.optionName
        }
      }
      return ''
    },
    editActivedEvent({ row }) {
      this.sourceDetailIdChangeEvent({ row })
    },
    handleSava() {
      this.questionDetail.questionLogicList = this.logicList
      this.$emit('close')
    },
    handleClose() {
      this.$emit('close')
    },
    // 新增
    handleAdd() {
      this.logicList.push({
        detailId: this.questionDetail.detailId,
        remark1: '如果',
        sourceDetailId: '',
        remark2: '选中',
        itemIndexOrder: '',
        visibleFlag: '1',
        indexOrder: this.logicList.length + 1
      })
    },
    // 删除
    handleDeleteRow() {
      const row = this.$refs.xTable.currentRow
      if (row) {
        this.logicList.forEach(function(item, index, arr) {
          if (item.indexOrder === row.indexOrder) {
            arr.splice(index, 1)
          }
        })
        this.handleOrder()
      }
    },
    // 排序
    handleOrder() {
      let index = 0
      this.logicList.forEach(mm => {
        index++
        mm.indexOrder = index
      })
    },
    sourceDetailIdChangeEvent({ row }) {
      if (row === undefined || row === null) {
        return
      }
      console.log(row)
      const list = this.question.questionDetailList
      for (let index = 0; index < list.length; index++) {
        if (list[index].detailId === row.sourceDetailId) {
          this.itemList.splice(0, this.itemList.length)
          list[index].questionDetailItemList.forEach(mm => {
            this.itemList.push({
              value: mm.indexOrder,
              label: mm.optionName
            })
          })
          break
        }
      }
    }
  }
}
</script>

<style lang="scss" scope>
</style>
